<template>
  <div class="container">
    <div class="top" style="">
      <p
        style="
          position: absolute;
          color: #333;
          font-size: 18px;
          cursor: pointer;
        "
        @click="$router.back()"
      >
        ✕
      </p>
      <p style="text-align: center; color: #333; font-size: 18px; margin: 15px">
        当前城市-
      </p>
      <el-input
        placeholder="请输入城市名、拼音、或字母查询"
        v-model="input"
        clearable
        @focus="isShow = !isShow"
        @blur="isShow = !isShow"
        @input="handleSearch"
      >
      </el-input>
    </div>
    <div v-if="isShow ? false : true">
      <ul>
        <li
          v-for="(item, index) in arr"
          :key="index"
          style="line-height: 30px; cursor: pointer"
          @click="handleCity(item)"
        >
          {{ item }}
        </li>
      </ul>
    </div>
    <div v-if="isShow" style="height: 3000px; width: 10rem">
      <p>GPS定位你所在城市</p>
      <div class="button">
        <button @click="handleCity('定位失败')">定位失败</button>
      </div>
      <p>热门城市</p>
      <div class="button">
        <button
          v-for="(item, index) in hotCities"
          :key="index"
          @click="handleCity(item.name)"
        >
          {{ item.name }}
        </button>
      </div>
      <ul>
        <li
          v-for="(item, index) in cities"
          :key="item.id"
          style="font-size: 18px; color: #b0b0b0"
        >
          {{ index }}
          <ul>
            <li
              v-for="items in item"
              :key="items.id"
              style="color: #333; line-height: 50px; cursor: pointer"
              @click="handleCity(items.name)"
            >
              {{ items.name }}
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hotCities: [],
      cities: [],
      isShow: true,
      input: "",
      city: [],
      arr: [],
    };
  },
  mounted() {
    this.$http("http://47.108.197.28:8000/city").then((res) => {
      this.cities = res.data.data.cities;
      this.hotCities = res.data.data.hotCities;
    });
  },
  methods: {
    handleSearch() {
      var values = Object.values(this.cities);
      this.arr = [];
      values.forEach((item) => {
        item.forEach((c) => {
          // console.log(c.name);
          if (c.name.includes(this.input) && c.name != "") {
            this.arr.push(c.name);
          }
        });
      });
    },
    handleCity(e) {
      this.$store.dispatch("handleCity",e);

      // this.city = e;
      // sessionStorage.setItem("city", this.city);
      this.$router.back();
    },
  },
};
</script>

<style scoped>
.container {
  width: 10rem;
  padding-top: 150px;
}
.top {
  width: 10rem;
  position: fixed;
  background-color: #f5f5f5;
  top: 0;
  z-index: 9999;
}
.el-input {
  height: 70px !important;
  width: 9rem !important;
}
p {
  margin-top: 10px;
  text-align: left;
  padding-left: 20px;
  color: #b0b0b0;
}
button {
  width: 3rem;
  height: 0.6667rem;
  margin: 10px 0;
}
.button {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 5px 20px;
}
li {
  text-align: left;
  padding-left: 20px;
}
</style>